// IndicatorTextView.vue
<template>
  <div class="indicator-text-container">
    <el-descriptions 
      title="学校指标详情" 
      :column="2" 
      border
      class="indicator-list"
    >
      <template>
        <el-descriptions-item  v-for="(value, key) in processedData" :key="key" 
          :label="getLabel(key)"
          label-class-name="indicator-label">
          <span class="indicator-value">
            {{ formatValue(value) }}
          </span>
        </el-descriptions-item>
      </template>
    </el-descriptions>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';

interface IndicatorData {
  [key: string]: string | number;
}

@Component
export default class IndicatorTextView extends Vue {

  
  @Prop({ required: true }) readonly rawData!: IndicatorData;

  // 指标标签映射表
  private labelMap: { [key: string]: string } = {
    code01: '学校名称',
    code02: '详细地址',
    code03: '学校编码',
    code04: '教育阶段',
    code05: '学校类型',
    code06: '主管部门',
    code07: '占地面积(㎡)',
    code08: '建筑面积(㎡)',
    code09: '在校学生数',
    code10: '是否寄宿制',
    code11: '教职工数',
    code12: '专任教师数',
    code23: '危房数量',
    code24: '应急供电能力',
    code25: '供水类型',
    code26: '供暖类型',
    code27: '通信设施',
    code28: '历史灾害记录',
    code29: '应急预案类型'
  };

  // 处理后的数据（过滤空值）
  get processedData() {
    return Object.fromEntries(
      Object.entries(this.rawData).filter(([_, v]) => v !== '无' && v !== '')
    );
  }

  // 获取友好标签
  private getLabel(codeKey: any): string {
    return this.labelMap[codeKey] || codeKey.replace('code', '指标');
  }

  // 格式化数值显示
  private formatValue(value: string | number): string {
    if (typeof value === 'number') {
      return value.toLocaleString();
    }
    
    // 处理特殊值
    const numValue = parseFloat(value);
    return isNaN(numValue) ? value : numValue.toLocaleString();
  }
}
</script>

<style lang="scss" scoped>
.indicator-text-container {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

  ::v-deep .indicator-list {
    .indicator-label {
      width: 160px;
      background: #f5f7fa;
      font-weight: 600;
      color: #606266;
    }

    .indicator-value {
      color: #303133;
      font-size: 14px;

      &[data-is-number] {
        color: #409eff;
        font-weight: 500;
      }
    }

    @media (max-width: 768px) {
      :deep(.el-descriptions-item__content),
      :deep(.el-descriptions-item__label) {
        display: block;
        width: 100%;
      }
    }
  }
}
</style>